<template>
<div id="classify-of-goods">
    <div class="add-classify">
        <my-button 
            :type="'add'"
            :link="true"
            :to="{name: 'addCate', params: {cateList}}"
        >添加分类</my-button>
    </div>
    <div class="table-layout">
        <div class="table">
            <ul class="thead">
                <li 
                    class="th" 
                    v-for="th in theadList" 
                    :key="th"
                >{{th}}</li>
            </ul>
            <tree-table 
                :list="partCateList"
                :id="'cate_id'"
                @update-data-event='handleUpdateData'
            >
                <my-button
                    :type="'edit'"
                    class="edit"
                >编辑</my-button>
                <my-button
                    :type="'delete'"
                    @click.native="handleClickDeleteCate"
                >删除</my-button>
            </tree-table>
        </div>
    </div>
    <div class="pagging-footer">
        <my-paging
            :total="cate_total"
            :pagetotal="partCateList.length"
            :pagenum="newcatepage"
            :page.sync="newpage"
            :count.sync="newCount"
        ></my-paging>
    </div>
</div>
</template>

<script>
const TreeTable = () => import("./TreeTable")
import { Local } from '../../common'
import { CLASSIFY_OF_GOODS } from '../../config/localConstant'
import { 
    goodsCateList, 
    deleteGoodsCate 
} from '../../config/data'
export default {
    name: "classifyOfGoods",
    data() {
        return {
            cateList: [],
            partCateList: [],
            cate_page: 1,
            cate_count: 2,
            cate_total: 0,
            cate_page_total: 0
        }
    },
    created() {
        this.getGoodsCateList()
    },
    methods: {
        handleUpdateData(data) {
            if(data) this.getGoodsCateList()
        },
        async handleClickDeleteCate(e) {
            let result = await deleteGoodsCate({
                cid: e.target.parentNode.parentNode.dataset.cateId
            })
            if(!result.fsBool) return;
            let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
            msg = msg ? msg : {}
            msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_NUMBER] = Math.ceil(result.data.tree.length / msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT]) || 1
            Local.set(CLASSIFY_OF_GOODS.KEY, msg)
            setTimeout(this.getGoodsCateList, 60) 
        },
        async getGoodsCateList() {
            let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
            msg = msg ? msg : {}
            let pageNumber = msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_NUMBER]
            let pageCount = msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT]
            let result = await goodsCateList({
                pages: pageNumber || this.cate_page,
                counts: pageCount || this.cate_count
            })
            let {
                cateList, currPageData,total, page, count, pageTotal 
            } = result.data
            this.cateList = cateList
            this.partCateList = currPageData
            this.cate_total = total
            this.cate_count = count
            this.cate_page = page
            this.cate_page_total = pageTotal
        }
    },
    computed: {
        theadList() {
            const list = ["#", "分类名称", "是否有效", "排序", "操作"]
            return list;
        },
        newpage: {
            get() {
                let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
                msg = msg ? msg : {}
                this.cate_page = msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_NUMBER] || 1
                return this.cate_page;
            },
            set(val) {
                this.cate_page = Number(val)
                let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
                msg = msg ? msg : {}
                msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_NUMBER] = this.cate_page
                Local.set(CLASSIFY_OF_GOODS.KEY, msg)
                this.getGoodsCateList()
            }
        },
        newCount: {
            get() {
                let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
                msg = msg ? msg : {}
                return msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT] || this.cate_count;
            },
            set(val) {
                this.cate_count = Number(val)
                let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
                msg = msg ? msg : {}
                msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT] = this.cate_count
                Local.set(CLASSIFY_OF_GOODS.KEY, msg)
                this.getGoodsCateList()
            }
        },
        newcatepage() {
            return this.cate_page_total;
        }
    },
    components: { TreeTable },
}
</script>

<style scoped>
#classify-of-goods {
    height: 100%;
}
.add-classify,
.pagging-footer {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
}
.table-layout {
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100% - 50px - 50px);
}
.table-layout::-webkit-scrollbar {
    display: none;
}
.table {
    border: 1px solid #cecece;
}
.thead {
    display: flex;
}
.th {
    width: 100%;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-left: 1px solid #cecece;
    box-sizing: border-box;
}
.th:nth-of-type(1) {
    min-width: 64px;
    max-width: 64px;
    width: 64px;
    border-left: none;
    text-align: left;
    text-indent: 1em;
}
.th:nth-of-type(2),
.th:nth-of-type(5) {
    min-width: 160px;
}
.th:nth-of-type(2) {
    text-align: left;
    text-indent: 1em;
}
.th:nth-of-type(3),
.th:nth-of-type(4) {
    min-width: 80px;
}
.pagging-footer {
    justify-content: center;
}
</style>